<template>
  <div class="profile-card card-item">
    <div class="avatar-wrapper">
      <el-avatar :src="avatarUrl" alt="用户头像" :size="80"
                 fit="contain" @click="previewVisible = true"
      />
      <el-image-viewer
          v-if="previewVisible"
          :url-list="[serviceFileRootPath + userStore.userInfo.avatar]"
          @close="previewVisible = false"
      />

      <i v-if="userStore.userInfo.gender"
         class="fas fa-mars gender-icon" style="color: #409EFF"></i>
      <i v-else class="fas fa fa-venus gender-icon" style="color: #FFB6C1"></i>
    </div>

    <span class="user-name">{{ userStore.userInfo.username }}</span>

    <div class="user-info">
      <div v-if="userStore.userInfo.area" class="info-item">
        <i class="fas fa-map-marker-alt"></i>
        <span>{{ userStore.userInfo.area.join('-') }}</span>
      </div>
      <div v-if="userStore.userInfo.birthDate" class="info-item">
        <i class="fas fa-birthday-cake"></i>
        <span>{{ userStore.userInfo.birthDate }}</span>
      </div>

      <div v-if="userStore.userInfo.job" class="info-item">
        <i class="fas fa-user-tie"></i>
        <span>{{ userStore.userInfo.job }}</span>
      </div>
    </div>

    <div class="user-info">
      <div v-if="userStore.userInfo.phoneNumber" class="info-item">
        <i class="fas fa-mobile-alt"></i>
        <span>{{ userStore.userInfo.phoneNumber }}</span>
      </div>
      <div v-if="userStore.userInfo.email" class="info-item">
        <i class="fas fa-envelope"></i>
        <span>{{ userStore.userInfo.email }}</span>
      </div>
    </div>

    <div v-if="userStore.userInfo.tags" class="user-info">
      <el-tag v-for="(item, index) in userStore.userInfo.tags"
              :key="index">{{ item }}</el-tag>
    </div>

    <span v-if="userStore.userInfo.description" class="user-bio">
      {{ userStore.userInfo.description }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useUserStore } from '@/store/user.ts'
import { serviceFileRootPath } from '@/utils'

const userStore = useUserStore()

const previewVisible = ref(false)

const avatarUrl = computed(() => {
  if (userStore.userInfo.avatar) {
    return serviceFileRootPath + userStore.userInfo.avatar
  } else {
    return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  }
})
</script>

<style lang="scss">
.profile-card {
  // background: linear-gradient(135deg, #6e8efb, #a777e3);
  // border-radius: 10px;
  padding: 10px;
  // box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  // color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .avatar-wrapper {
    position: relative;
    display: inline-block;

    .gender-icon {
      position: absolute;
      right: 2px;
      bottom: 0;
      background: white;
      border-radius: 50%;
      padding: 3px;
    }
  }

  .user-name {
    font-size: 1.5rem;
  }

  .user-info {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;

    .info-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
</style>
